<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <style>
        .login-one {
            background-image: url(/image/login5.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            overflow: hidden;
            height: 100%;
        }

        .el-header, .el-footer {
            color: white;
            padding-top: 10px;
        }

        .el-aside {
            background-color: white;
            height: 100%;
        }

        .el-main {
            overflow: hidden;
            height: 100%;
        }

        .el-container {
            height: 100%;
        }

        html, body {
            height: 100%;
            margin: 0px;
        }
    </style>
</head>
<body>
<div id="app" style="height: 100%;">
    <el-container>
        <el-header class="login-one">
            <el-col :span="8">
                <span>职员管理系统</span>
            </el-col>
            <el-col :span="8">
                &nbsp;
            </el-col>
            <el-col :span="8" align="right">
                <el-button type="success" size="mini" @click="ChangePasswordPage">修改密码</el-button>
                <el-button type="success" size="mini" @click="toUrl('/info','个人设置页面')">个人信息修改</el-button>
                <el-button type="success" size="mini" @click="exit">退出登录</el-button>
                <el-avatar size="small" :src="circleUrl"></el-avatar>
                <span>{{name}}</span>
            </el-col>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-openeds="['1']" class="el-menu-vertical-demo">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-tools"></i>
                            <span>管理</span>
                        </template>
                        <el-menu-item @click="toUrl('/list','职工管理')">
                            <i class="el-icon-user-solid"></i>
                            <span>职工管理</span>
                        </el-menu-item>
                        <el-menu-item @click="toUrl('/product','产品管理')">
                            <i class="el-icon-s-goods"></i>
                            <span>产品管理</span>
                        </el-menu-item>
                        <el-menu-item @click="toUrl('/notice','公告管理')">
                            <i class="el-icon-message-solid"></i>
                            <span>公告管理</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <el-tag
                        type="warning"
                        @click="openUrl(tag.url)"
                        :key="tag.name"
                        v-for="tag in tags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag.name)"
                        style="position:relative;top:-20px;left:-20px;cursor:pointer;">
                    {{tag.name}}
                </el-tag>
                <iframe :src="url" height="100%" width="100%" style="border: solid 0px;"></iframe>
            </el-main>
        </el-container>
    </el-container>

    <!-- 用户修改的对话框 -->
    <el-dialog
            title="修改密码"
            :visible.sync="updatePasswordShow"
            width="30%">
        <el-form ref="form" label-width="80px">
            <el-form-item label="新密码" prop="newpassword">
                <el-col :span="22">
                    <el-input v-model="parameterUpdate.employeePassword" show-password></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-col :span="22">
                    <el-input v-model="verify.email"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="验证码" prop="captcha">
                <el-col :span="22">
                    <el-input v-model="verify.captcha"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="sendCode">邮件发送验证码</el-button>
                <el-button type="primary" size="mini" @click="update">修改</el-button>
                <el-button type="primary" size="mini">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    var index = new Vue({
        el: "#app",
        data: {
            parameterUpdate: { // 密码更改对象
                employeePassword: ""
            },
            verify: {
                email: "",
                captcha: ""
            },
            name: "",
            tags: [{ name: "系统首页", url: "/list" }],
            url: "/list",
            circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
            updatePasswordShow: false,
        },
        mounted() {
            this.name = sessionStorage.getItem("name");
            this.circleUrl = sessionStorage.getItem("src");
        },
        methods: {
            sendCode() {
                const self = this;
                if (!this.verify.email) {
                    self.$alert('请输入邮箱地址');
                    return;
                }
                $.ajax({
                    url: "/employee/sendCode",
                    type: "get",
                    data: { email: this.verify.email },
                    success: function(rs) {
                        if (rs.code == 200) {
                            self.$alert('验证码已发送到邮箱');
                        } else {
                            self.$alert('验证码发送失败');
                        }
                    }
                });
            },

            update() {
                const self = this;
                $.ajax({
                    url: "/employee/verify",
                    type: "get",
                    data: { code: this.verify.captcha },
                    success: function(rs) {
                        if (rs.code != 200) {
                            self.$alert('验证码错误');
                            return;
                        }
                        $.ajax({
                            url: "/employee/update",
                            type: "post",
                            data: JSON.stringify(self.parameterUpdate),
                            contentType: "application/json",
                            success: function(rs) {
                                if (rs.code == 200) {
                                    self.updatePasswordShow = false;
                                    self.$alert(rs.msg);
                                } else {
                                    self.$alert(rs.msg);
                                }
                            }
                        });
                    }
                });
            },
            ChangePasswordPage() {
                // 打开新增对话框
                this.updatePasswordShow = true;
            },
            exit() { // 退出登录
                // 清除sessionStorage数据
                sessionStorage.clear();
                window.location.href = "/login";
            },
            toUrl: function(url, name) {
                this.url = url;
                var is = false;
                for (var i = 0; i < this.tags.length; i++) {
                    if (this.tags[i].name == name) {
                        is = true;
                    }
                }
                if (is == false) {
                    this.tags.push({ "name": name, "url": url });
                }
            },
            handleClose(name) {
                if (name == "系统首页") {
                    this.$message({
                        message: "系统首页不能关闭",
                        type: "error"
                    });
                    return;
                }
                for (var i = 0; i < this.tags.length; i++) {
                    if (this.tags[i].name == name) {
                        this.tags.splice(this.tags.indexOf(this.tags[i]), 1);
                    }
                }
                this.url = "/list";
            },
            openUrl: function(url) {
                this.url = url;
            }
        }
    })
</script>
</html>
